<div class="content">
    <div id="example_title">
        <h1>Virtual Scroll</h1>
        If you have lots of records in the grid, it will only render in the DOM those that are in the view. Records are
        dynamically added and removed as user scrolls. The grid below has
        <span class="prop">25,000</span>
        random records and uses local data source.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="main" style="width: 100%; height: 400px;"></div>

<!--CODE-->
<script type="module">
import { w2grid } from '__W2UI_PATH__'

// widget configuration
let config = {
    grid: {
        name: 'grid',
        show: {
            footer: true,
            toolbar: true
        },
        columns: [
            { field: 'personid', text: 'ID', size: '50px', sortable: true, searchable: 'int', resizable: true },
            { field: 'fname', text: 'First Name', size: '140px', sortable: true, searchable: 'text', resizable: true },
            { field: 'lname', text: 'Last Name', size: '140px', sortable: true, searchable: 'text', resizable: true },
            { field: 'email', text: 'Email', size: '100%', resizable: true, sortable: true },
            { field: 'snumber', text: 'Number', size: '120px', resizable: true, sortable: true, render: 'money' },
            { field: 'sdate', text: 'Date', size: '120px', resizable: true, sortable: true, render: 'date' }
        ]
    }
}

let time = Date.now()
// initialization
let grid = new w2grid(config.grid)
// generate data
let fname = ['Vitali', 'Katsia', 'John', 'Peter', 'Sue', 'Olivia', 'Thomas', 'Sergei', 'Snehal', 'Avinash', 'Divia']
let lname = ['Peterson', 'Rene', 'Johnson', 'Cuban', 'Twist', 'Sidorov', 'Vasiliev', 'Yadav', 'Vaishnav']
// add 25k records
for (let i = 0; i < 25000; i++) {
    grid.records.push({
        recid : i+1,
        personid: i+1,
        fname: fname[Math.floor(Math.random() * fname.length)],
        lname: lname[Math.floor(Math.random() * lname.length)],
        email: 'vm@gmail.com', manager: '--',
        snumber: Math.floor(Math.random() * 8000),
        sdate: (new Date(Math.floor(Math.random() * 20000) * 100000000)).getTime()
    })
}
grid.render('#main')

</script>
